<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="assets/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="assets/css/ace.min.css" />
    <link rel="stylesheet" href="css/style.css"/>
    <script type="text/javascript" src="js/vue.min.js"></script>
    <script type="text/javascript" src="js/axios.js"></script>
    <title>产品详情</title>
</head>

<body>
<div class="page-content">

    <div class="Product_Details Order_Details_style">
        <div class="Numbering"><b>#0号柴油产品详细</b></div>
        <div>
            <ul class="clearfix">
                <li><label class="label_name">产品名称</label><span>2016年询价项目</span></li>
                <li><label class="label_name">产品联系人</label><span>南京扬子江码头</span></li>
                <li><label class="label_name">联系电话</label><span>2016-4-15 12:34</span></li>
                <li><label class="label_name">产品备注</label><span>长江号</span></li>
            </ul>
        </div>
    </div>
    <div id="app">
        <table class="table table-striped table-bordered table-hover" >
            <thead>
            <tr><th>序号</th><th>产品属性</th><th>操作</th></tr>
            </thead>
            <tbody>
            <tr v-for="pt in P">
                <td>{{pt.id}}</td>
                <td>{{pt.name}}</td>
                <td><button type="button" class="btn btn-primary" onclick="window.location.href = '1详情修改.html'">修改属性</button><button type="button" class="btn btn-warning" @click="d(pt.id)">删除</button></td>
            </tr>
            </tbody>
        </table>
    </div>
    <div class="add_Attributes"><button class="btn btn-primary Attribute_btn" type="button">添加属性</button></div>
</div>
<!--添加属性样式-->
<div class="Attributes_style" id="add_Attributes_style">
    <form action="/test4.do" method="post" onsubmit="return validateForm()">
        <input name="name" type="text"  class="Attributestext"/>
        <div style="text-align: center;">
            <input type="submit" value="添加" style="display: inline-block;">
        </div>
    </form>
</div>
<!--[if !IE]> -->
<script src="assets/js/jquery.min.js"></script>
<!-- <![endif]-->

<!--[if !IE]> -->

<script type="text/javascript">
    window.jQuery || document.write("<script src='assets/js/jquery-2.0.3.min.js'>"+"<"+"/script>");
</script>

<!-- <![endif]-->

<!--[if IE]>
<script type="text/javascript">
    window.jQuery || document.write("<script src='assets/js/jquery-1.10.2.min.js'>"+"<"+"/script>");
</script>
<![endif]-->
<script src="assets/layer/layer.js" type="text/javascript"></script>
<script type="text/javascript">

    //弹出一个iframe层
    $('.Attribute_btn').on('click', function(){
        layer.open({
            type: 1,
            title: '添加属性',
            area : ['400px' , '150px'],
            content:$('#add_Attributes_style')
        });
    });

</script>
<script>
    new Vue({
        el:"#app",
        data:{
            P:[]
        },
        mounted(){
            this.getptype();
        },
        methods:{
            getptype(){
                axios.get("Plist.do").then(dt=>{
                    this.P = dt.data;
                })
            },
            d(id){
                axios.get("delete4.do?id="+id).then(
                )
                this.getptype()
            },
        }
    })
</script>
</body>
<script>
    function validateForm() {
        var name = document.querySelector('input[name="name"]').value;

        if (name.trim() === "") {
            alert("请填写完整信息");
            return false;
        }

        return true;
    }
</script>
</html>
